<template>
    <div class="order_detail" v-loading="loading">
        <header>
            <div class="order_ids">
                <div class="order_id">
                    <img src="../../assets/images/market/order.png" alt="" />
                    <span>单号：{{allData.ORDER_NO}}</span>
                </div>
                <div class="order_btns">
                    <!-- 退款中和已退款没有取消订单，待服务才有完工确认 -->
                    <el-button v-if="!(allData.ORDER_STATUS==7 || allData.ORDER_STATUS==8)" @click.native="cancels">取消订单</el-button>
                    <el-button @click.native="prints">打印清单</el-button>
                    <el-button v-if="allData.ORDER_STATUS==2&allData.PAY_STATUS==1" type="danger" style="background:#e7251a;" @click.native="ensures">完工确认</el-button>
                </div>
            </div>
            <div class="telephones">
                <div class="info1">
                    <p>手机号：
                        <span>{{allData.phone}}</span>
                    </p>
                    <p>咖啡门店：{{allData.SHOP_NAME}}</p>
                </div>
                <div class="info2">
                    <p>状态</p>
                    <p>订单金额</p>
                </div>
            </div>
            <div class="order_date">
                <div class="info1">
                    <p>订单日期：
                        <span v-if="allData.ORDER_TIME">{{allData.ORDER_TIME|filterTimess}}</span>
                        <span v-else>--</span>
                    </p>
                </div>
                <div class="info2">
                    <p v-if="allData.ORDER_STATUS==2&allData.PAY_STATUS==1">待服务</p>
                    <p v-if="allData.ORDER_STATUS==3">待评价</p>
                    <p v-if="allData.ORDER_STATUS==4">已完成</p>
                    <p v-if="allData.ORDER_STATUS==5">已取消</p>
                    <p v-if="allData.ORDER_STATUS==7">退款中</p>
                    <p v-if="allData.ORDER_STATUS==8">已退款</p>
                    <p v-if="allData.ORDER_STATUS==2&allData.PAY_STATUS==0">待付款</span>
                        <p style="margin-left:75px;">￥{{allData.ORDER_TOTAL}}</p>
                </div>
            </div>
        </header>
        <div class="goods_infos">
            <div class="goods_info_title">商品信息</div>
            <div class="goods_info_table">
                <el-table :data="allData.ORDER_DETAIL_LIST" style="width: 100%">
                    <el-table-column prop="FIRST_CLASS_NAME" label="项目大类" width="300"> </el-table-column>
                    <el-table-column prop="SERV_NAME" label="商品名称" width="300"> </el-table-column>
                    <el-table-column prop="PRICE" label="销售价" width="200"> </el-table-column>
                    <el-table-column prop="PRICE" label="实付" width="200"> </el-table-column>
                    <el-table-column prop="QUANTITY" label="数量（件）" width="200"> </el-table-column>
                    <el-table-column prop="AMOUNT" label="小计" width="200"></el-table-column>
                </el-table>
            </div>
        </div>
        <div class="pay_infos">
            <div class="pay_info_title">支付信息</div>
            <div class="all_infos">
                <div class="info1" v-if="payData">
                    <div class="info1_top">
                        <p>支付方式：
                            <span v-if="payData.PAY_WAY==1">微信支付</span>
                            <span v-else-if="payData.PAY_WAY==2">支付宝支付</span>
                            <span v-else-if="payData.PAY_WAY==4">线下支付</span>
                            <span v-else-if="payData.PAY_WAY==9">银豹支付</span>
                            <span v-else>其它支付方式</span>
                        </p>
                        <p>订单金额：
                            <span>￥{{allData.ORDER_TOTAL}}</span>
                        </p>
                        <p>应付订单金额：
                            <span>￥{{allData.ORDER_TOTAL}}</span>
                        </p>
                    </div>
                    <div class="info1_bottom">
                        <p>用户支付金额：
                            <span>￥{{payData.AMOUNT}}</span>
                        </p>
                        <p>支付单号：
                            <span>{{allData.ORDER_NO}}</span>
                        </p>
                        <p></p>
                    </div>
                </div>
                <div class="info2" v-if="ticketData">
                    <div class="info2_title">代金券</div>
                    <div class="info2_top">
                        <p>代金券号：
                            <span>{{ticketData.CASHVOL_NO}}</span>
                        </p>
                        <p>代金券抵扣金额：
                            <span>￥{{ticketData.AMOUNT}}</span>
                        </p>
                        <p></p>
                    </div>
                    <div class="info2_bottom">
                        <p>代金券类型：
                            <span v-if="ticketData.CATEGORY==1">满抵券</span>
                            <span v-if="ticketData.CATEGORY==2">兑换券</span>
                            <span v-if="ticketData.CATEGORY==3">服务券</span>
                            <span v-if="ticketData.CATEGORY==4">N元券</span>
                            <span v-if="ticketData.CATEGORY==5">折扣券</span>
                        </p>
                        <p>该数据更新时间：
                            <span v-if="ticketData.UPDATE_TIME">{{ticketData.UPDATE_TIME|filterTimess}}</span>
                            <span v-else>--</span>
                        </p>
                        <p></p>
                    </div>
                </div>
                <div class="info3" v-if="tongData">
                    <div class="info3_title">通币</div>
                    <div class="info3_top">
                        <p>通币抵扣数：
                            <span>{{tongData.AMOUNT}}</span>
                        </p>
                        <p></p>
                        <p></p>
                    </div>
                </div>
                <div class="info4" v-if="allData.ACT_TYPE">
                    <div class="info4_title">{{allData.ACT_TYPE}}</div>
                    <div class="info4_top" v-if="allData.ACT_NAME">
                        <p>活动名称：
                            <span>{{allData.ACT_NAME}}</span>
                        </p>
                        <p></p>
                        <p></p>
                    </div>
                </div>
            </div>
            <div class="info_result" v-if="payData">
                <div class="info_result_top">
                    <p>支付方式：
                        <span v-if="payData.PAY_WAY==1">微信支付</span>
                        <span v-else-if="payData.PAY_WAY==2">支付宝支付</span>
                        <span v-else-if="payData.PAY_WAY==4">线下支付</span>
                        <span v-else-if="payData.PAY_WAY==9">银豹支付</span>
                        <span v-else>其它支付方式</span>
                        <span style="display:none;">明细</span>
                    </p>
                    <p>本次支付金额：
                        <span>￥{{payData.AMOUNT}}</span>
                    </p>
                    <p></p>
                </div>
                <div class="info_result_bottom" v-if="payData.PAY_WAY==9">
                    <p>支付后余额：
                        <span>￥{{payData.BALANCE}}</span>
                    </p>
                </div>
            </div>
        </div>
        <!-- 取消备注弹窗 -->
        <div class="remarks">
            <el-dialog title="请输入取消订单的原因（必填）" :visible.sync="dialogVisible" width="30%">
                <p slot="footer" class="dialog-body">
                    <el-input type="textarea" id="tex" :rows="3" placeholder="请输入内容" v-model="textarea1"> </el-input>
                </p>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click.native="ensure">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>
<script>
    import { setCookie, getCookie } from '@/assets/js/cookie'
    export default {
        name: 'order_detail',
        data() {
            return {
                allData: '', //订单详情数据
                payData: '', //支付信息数据，可能为空
                ticketData: '', //代金券支付信息数据，可能为空
                tongData: '', //通币支付信息
                loading: true,
                dialogVisible: false, //是否显示备注弹窗
                textarea1: '', //备注内容
            }
        },
        created() {
            this.getD();
        },
        methods: {
            //订单详情
            getD() {
                this.$axiosPost('/4SCAFE/ServOrderSystem/getCafeOrderDetail.action', {
                    ORDER_ID: this.$route.params.id
                }).then(res => {
                    this.loading = true;
                    //console.log(res);
                    if(res.STATUS_CODE === 1) {
                        this.loading = false;
                        this.allData = res;
                        if(res.SERV_PAYMEN_RECORD) {
                            this.payData = res.SERV_PAYMEN_RECORD;
                            this.ticketData = res.CASHVOL_PAYMEN_RECORD;
                            this.tongData = res.TB_PAY_RECORD;
                        }
                    }
                })
            },
            //取消订单
            cancels() {
                let that = this;
                this.$confirm('此操作不可逆, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.dialogVisible = true;
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '操作已取消'
                    });
                });
            },
            //打印清单
            prints() {
                var w = screen.availWidth * 0.5;
                var h = screen.availHeight * 0.8;
                var iTop = (window.screen.availHeight - 30 - h) / 2;
                var iLeft = (window.screen.availWidth - 10 - w) / 2;
                window.open('http://carnt.carnettong.com:8088/CARNT/act/prints/print_order_detail.html?oid=' + this.$route.params.id, '', 'width=' + w + ',height=' + h + ',top=' + iTop + ',left=' + iLeft + ',status=yes');
            },
            //完工确认
            ensures() {
                let that = this;
                this.$confirm('此操作不可逆, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    that.OK2();
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '操作已取消'
                    });
                });
            },
            //二次完工确认
            OK2() {
                let flagss = true;
                if(!flagss) {
                    return;
                }
                this.$axiosPost('/4SCAFE/ServOrderSystem/confirmCafeOrder.action', {
                    ORDER_ID: this.$route.params.id
                }).then(res => {
                    flagss = false;
                    //console.log(res);
                    if(res.STATUS_CODE === 1) {
                        flagss = true;
                        this.$message({
                            type: 'success',
                            message: '确认成功'
                        });
                        setTimeout(() => this.$router.push({
                            path: '/manages/order'
                        }), 1500);
                    }
                })
            },
            //取消订单的备注内容 确定
            ensure() {
                if(this.textarea1 == '') {
                    document.getElementById('tex').focus();
                    return;
                }
                let obj = {};
                obj.ORDER_ID = Number(this.$route.params.id);
                obj.MASTER_NAME = getCookie('userName');
                obj.APPLICATION = this.textarea1;
                let flagss = true;
                if(!flagss) {
                    return;
                }
                this.$axiosPost('/4SCAFE/ServOrderSystem/cancelCafeOrder.action', obj).then(res => {
                    flagss = false;
                    //console.log(res);
                    if(res.STATUS_CODE === 1) {
                        this.dialogVisible = false;
                        flagss = true;
                        this.$message({
                            type: 'success',
                            message: '取消订单成功'
                        });
                        setTimeout(() => this.$router.push({
                            path: '/manages/order'
                        }), 1500);
                    } else if(res.STATUS_CODE === 82) {
                        this.$message({
                            type: 'warning',
                            message: '订单号无效'
                        });
                    } else if(res.STATUS_CODE === 81) {
                        this.$message({
                            type: 'warning',
                            message: '当前订单不能取消'
                        });
                    }
                })
            },
        },
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .order_detail {
        min-height: 100%;
        background: #f0f2f5;
        header {
            background: #fff;
            padding: 30px 20px 30px 30px;
            .order_ids {
                display: flex;
                justify-content: space-between;
                .order_id {
                    display: flex;
                    align-items: center;
                    font-size: 22px;
                    font-weight: 700;
                    img {
                        margin-right: 15px;
                    }
                }
                .order_btns {
                    display: flex;
                }
            }
            .telephones, .order_date {
                width: 99%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin: 8px 0 0 0;
                .info1 {
                    display: flex;
                    align-items: center;
                    p {
                        font-size: 18px;
                        span {
                            color: #848484;
                        }
                    }
                    p:nth-of-type(1) {
                        margin-left: 55px;
                    }
                    p:nth-of-type(2) {
                        margin-left: 180px;
                    }
                }
                .info2 {
                    display: flex;
                    p {
                        font-size: 18px;
                        color: #848484;
                    }
                    p:nth-of-type(2) {
                        margin-left: 65px;
                    }
                }
            }
            .order_date {
                margin-top: -20px;
                .info2 {
                    p {
                        font-size: 24px;
                        color: #000;
                    }
                    p:nth-of-type(1) {
                        margin-right: -30px;
                    }
                }
            }
        }
        .goods_infos {
            width: 97%;
            margin: 40px auto;
            background: #fff;
            padding-bottom: 60px;
            .goods_info_title {
                padding: 30px 0 0 30px;
                font-size: 20px;
                font-weight: 700;
            }
            .goods_info_table {
                margin-top: 20px;
            }
        }
        .pay_infos {
            width: 97%;
            margin: 40px auto;
            background: #fff;
            padding-bottom: 70px;
            .pay_info_title {
                padding: 30px;
                font-size: 20px;
                font-weight: 700;
                border-bottom: 1px solid #DCDCDC;
            }
            .all_infos {
                .info1 {
                    .info1_top, .info1_bottom {
                        display: flex;
                        justify-content: space-around;
                        p {
                            width: 30%;
                            span {
                                color: #848484;
                            }
                        }
                    }
                    .info1_top {
                        margin-top: 20px;
                    }
                }
                .info2, .info3, .info4 {
                    .info2_title, .info3_title, .info4_title {
                        color: #000;
                        font-weight: 700;
                        padding: 25px 0 10px 30px;
                    }
                    .info2_top, .info2_bottom, .info3_top, .info3_bottom, .info4_top, .info4_bottom {
                        display: flex;
                        justify-content: space-around;
                        p {
                            width: 30%;
                            span {
                                color: #848484;
                            }
                        }
                    }
                }
            }
            .info_result {
                width: 97%;
                margin: 30px auto;
                padding-top: 20px;
                .info_result_top {
                    display: flex;
                    justify-content: space-around;
                    p {
                        width: 40%;
                        span {
                            color: #848484;
                        }
                        span:nth-of-type(2) {
                            color: #1890ff;
                            cursor: pointer;
                            margin-left: 20px;
                            &:hover {
                                text-decoration: underline;
                            }
                        }
                    }
                }
            }
        }
    }
</style>